<template>
  <vxe-modal
    ref="previewModal"
    v-model="visible"
    :resize="true"
    width="1024"
    :title="title"
    :position="{ top: '15%' }"
    :show-zoom="true"
    :destroy-on-close="false"
    @close="$emit('input', false)"
  >
    <div class="smartapi-preview searchBox" v-if="visible">
      <el-form :inline="true" label-suffix=":" size="small" class="el-searchbox">
        <el-form-item label="查询条件">
          <el-select v-model="search.type">
            <el-option
              v-for="item in controlData.apiFields"
              :key="item.fieldId"
              :label="item.name"
              :value="item.searchCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="值">
          <el-input v-model="search.value"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button type="info" @click="onRefresh">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" size="small" border max-height="500px">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          v-for="col in controlData.apiFields"
          :key="col.fieldId"
          :label="col.name"
          :prop="col.code"
        >
          <template slot-scope="scope">
            <span>{{ scope.row[col.code] }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :layout="layout"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </vxe-modal>
</template>

<script>
import request from "@/utils/request";
import _ from "lodash";

export default {
  name: "smartapi-preview",
  props: {
    value: Boolean,
    url: String,
    title: String,
  },
  data() {
    return {
      visible: false,
      pageAction: "list",
      loading: false,
      tableData: [],
      currentPage: 1,
      pageSizes: [10, 20, 50, 100],
      pageSize: 10,
      layout: "total, sizes, prev, pager, next, jumper",
      total: 0,
      draw: 0,
      search: {
        type: "",
        value: "",
      },
      controlData: {},
      urls: {},
    };
  },
  watch: {
    value(visible) {
      if (visible) {
        this.fetchPreviewModel().then((r) => {
          this.loadData();
          this.visible = visible;
        });
      } else {
        this.visible = visible;
      }
    },
  },
  methods: {
    loadData(opt) {
      this.draw += 1;
      if (this.urls.query) {
        this.loading = true;
        let params = _.extend(
          {
            start: (this.currentPage - 1) * this.pageSize,
            length: this.pageSize,
            draw: this.draw,
          },
          opt
        );
        request({
          url: this.urls.query,
          method: "post",
          data: params,
        })
          .then((r) => {
            if (r && r.data) {
              this.tableData = r.data;
              this.total = r.recordsTotal;
              this.pageSize = r.pageSize;
              this.currentPage = r.startIndex;
              // this.$emit("input", r.data);
            } else {
              this.$alert("初始化数据失败，请关闭窗口后重试", "注意");
            }
            this.loading = false;
          })
          .catch((e) => {
            this.$alert("数据加载失败，请稍后重试", "注意");
            this.loading = false;
            console.error(e);
          });
      } else {
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.loadData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadData();
    },
    onSearch() {
      let opt = {};
      if (this.search.value && this.search.type) {
        opt.query = {
          [this.search.type]: this.search.value,
        };
      }
      this.loadData(opt);
    },
    onRefresh() {
      this.search.type = "";
      this.search.value = "";
      this.loadData();
    },
    fetchPreviewModel() {
      return new Promise((rs, rj) => {
        request({
          url: this.url,
          method: "post",
          data: {},
        }).then((vm) => {
          this.urls = vm.urls;
          this.controlData = vm.controlData;
          rs(true);
        });
      });
    },
  },
  // created() {
  //   this.loadData();
  // },
};
</script>

<style>
</style>